<template>
  <view
    class="topBar"
    :class="tabTitle ? 'topBarNav' : ''"
  >
    <page-meta :root-font-size="fontsize+'px'"></page-meta>
    <view 
      class="title-nav"
      :style="{
        'padding-top': `${statusBar}px`,
        'text-align': align
      }"
    >
      {{ tabTitle }}
    </view>
    <!-- 占位元素 -->
    <view :style="{height: `${2.2*fontsize+statusBar}px`}" v-if="tabTitle"></view>
    <view :style="{height: `${statusBar}px`}" v-else></view>
  </view>
</template>
<script>
export default {
  name: "topBar",
  props: {
    tabTitle: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'center'
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      fontsize: 12,
      statusBar: 0, //状态栏高度
      customBar: 0, // 状态栏高度 + 导航栏高度  
      navbar: 0 // 自定义标题与胶囊对齐高度
    };
  },
  created() {},
  mounted() {
    uni.getSystemInfo({
      success: (e) => {
        // this.compareVersion(e.SDKVersion, '2.5.0')
        
        // #ifdef MP
        this.statusBar = e.statusBarHeight
        this.customBar = e.statusBarHeight + 45
        if (e.platform === 'android') {
          this.$store.commit('SET_SYSTEM_IOSANDROID', false)
          this.customBar = e.statusBarHeight + 50
        }
        // #endif
        
        
        // #ifdef MP-WEIXIN
        this.statusBar = e.statusBarHeight
        const custom = wx.getMenuButtonBoundingClientRect()
        this.customBar = custom.bottom + custom.top - e.statusBarHeight

        this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
        // #endif

        // #ifdef MP-ALIPAY
        this.statusBar = e.statusBarHeight
        this.customBar = e.statusBarHeight + e.titleBarHeight
        // #endif

        // #ifdef APP-PLUS
        console.log('app-plus', e)
        this.statusBar = e.statusBarHeight
        this.customBar = e.statusBarHeight + 45
        // #endif

        // #ifdef H5
        this.statusBar = 0
        this.customBar = e.statusBarHeight + 45
        // #endif
      }
    })
    this.remInit()
  },
  methods: {
    remInit() {
      let srceenNunber = 19.2	//因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px
      let that = this
      
      //窗体改变大小触发事件
      uni.onWindowResize((res) => {
        // console.log('变化后的窗口宽度=' ,res.size.windowWidth)
        that.fontsize = parseFloat(res.size.windowWidth)/srceenNunber
      })
      
      //打开获取屏幕大小
      uni.getSystemInfo({
        success(res) {
          // console.log('设备信息：',res)
          that.fontsize = res.screenWidth/srceenNunber
          // console.log('字体大小：',that.fontsize)
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
  // .topBarNav {
  //   &::after {
  //     display: block;
  //     content: '';
  //     height: 2.2rem;
  //   }
  // }
  .topBar {
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    line-height: 2.2rem;
    .title-nav {
      background: #fff;
      border-bottom: 1px solid #e7e7e7;
      line-height: 2.2rem;
      position: fixed;
      top: 0;
      text-align: center;
      font-size: 0.8rem;
      font-weight: bold;
      width: calc(100% - 1rem);
      padding: 0 0.5rem;
      z-index: 10;
    }
  }
</style>
